<template>
	<view class="padding">
		<view class="bg padding radius">
			<view class=" u-flex " @click="binddetail(order)">
				<view class="u-m-r-10" v-if="order.orderTaking">
					<image :src="order.orderTaking.homepageImg" style="width: 140rpx;height: 140rpx;" mode="aspectFill">
					</image>
				</view>
				<view class="u-flex-1 text-white" v-if="order.orderTaking">
					<view class="u-font-14  text-bold padding-bottom-xs u-line-1" style="width: 480rpx;">
						{{order.orderTaking.myLevel}}
					</view>
					<view class="padding-top-xs text-lg">
						<text style="font-size: 20rpx;">￥</text>
						{{order.orderTaking.oldMoney}}元/{{order.orderTaking.unit}}<text
							style="font-size: 20rpx;margin-left: 10rpx;">*</text>
						<text style="color: #666666;">{{order.orderNumber}}{{order.orderTaking.unit}}</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between margin-top">
				<view style="width: 120upx;">实付款</view>
				<view class="text-white text-lg">
					<text class="text-sm">￥</text>{{price}}
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top">
			<view class="text-lg text-bold">
				服务信息
			</view>
			<view class="margin-right-xs">
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务类型</view>
					<view class="text-white" v-if="order.orderTaking">
						<text v-for="(item,index) in order.orderTaking.gameId" :key="index"
							class="margin-left-sm">{{item}}</text>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务时间</view>
					<view class="text-white">{{order.startTime}}时</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">服务地点</view>
					<view class="text-white" @tap="bindGps(order.latitude,order.longitude,order.detailsAddress)">
						{{order.city}}{{order.district}}{{order.detailsAddress}}
						<u-icon name="map"></u-icon>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">联系方式</view>
					<view class="text-white" @click="bindphone(order.phone)">{{order.phone}}
						<u-icon name="phone"></u-icon>
						<text class="margin-left-sm"> {{order.name}}</text>
					</view>
				</view>
				<view class=" margin-top-lg" v-if="order.remarks">
					<view class="text-bold" style="width: 165rpx;">备注</view>
					<view class="text-white margin-top">{{order.remarks}}</view>
				</view>
			</view>
			<!-- <view class="flex justify-between margin-top">
				<view @click="goMsg">
					<u-icon name="chat" size="32" color="#557EFD" class="margin-right-sm"></u-icon>联系TA
				</view>
				<view class="text-white">实付：<text class="text-lg text-bold">{{order.payMoney}}元</text></view>
			</view> -->
		</view>

		<view class="bg radius margin-top-sm padding" v-if="order.staffUserId">
			<view class="flex justify-between align-center">
				<view>联系员工</view>
				<view style="color: #557EFD;text-align: right;">{{order.createTime}}</view>
			</view>
			<view class="flex margin-top-sm">
				<view>
					<image :src="orderList.avatar?orderList.avatar:'../../static/logo.png'"
						style="width: 88upx;height: 88upx;border-radius: 50upx;"></image>
				</view>
				<view class="margin-left-xs flex align-center justify-between" style="width: 100%;">
					<view>
						<view>{{orderList.userName}}</view>
						<view class="margin-top-xs">{{orderList.phone}}</view>
					</view>
					<view class="flex align-center">
						<view @click="goMsg(orderList.userId,orderList.userName)">
							<image src="../static/xiaoxi.png" style="width: 60upx;height: 60upx;"></image>
						</view>
						<view @click="bindphone(orderList.phone)">
							<image src="../static/phone.png" style="width: 60upx;height: 60upx;margin-left: 25upx;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top" v-if="order.state==1||order.state==2">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in order.startServiceImg" :key="index"
					@click="saveImg( order.startServiceImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" v-if="order.state==2">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in order.endServiceImg" :key="index"
					@click="saveImg( order.endServiceImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top" v-if="order.state==1">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap">
				<view v-if="endImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in endImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,2)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(2)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" v-if="order.state==4">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>

			<view class="flex flex-wrap">
				<view v-if="startImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in startImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,1)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>

						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(1)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top" style="margin-bottom: 140rpx;">
			<view class="text-lg text-bold">
				订单信息
			</view>
			<view class="margin-right-xs">
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">订单编号</view>
					<view @click="copyOrder(order.ordersNo)" class="text-white">{{order.ordersNo}}
						<u-icon name="order"></u-icon>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view class="text-bold" style="width: 165rpx;">下单时间</view>
					<view class="text-white">{{order.createTime}}</view>
				</view>

			</view>
		</view>


		<view class="tabber margin-right-xs padding-right" v-if="order.state ==1||order.state ==4">
			<view>
				<u-button v-if="order.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="copyOrderuser(order)">一键复制</u-button>
			</view>
			<view class="flex align-center">
				<!-- <u-button v-if="order.state == 4" :custom-style="customStyle1" shape="circle" :plain="true"
					@click="cancelOrder(order,3)">拒绝接单</u-button> -->
				<!-- <u-button v-if="order.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
					@click="Ordersure()">完成服务</u-button> -->
				<!-- <u-button v-if="order.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="cancelOrder(order,1)">开始服务</u-button> -->
				<u-button v-if="order.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="zhipai()">转派单</u-button>
			</view>
		</view>

		<u-popup v-model="show" mode="bottom" border-radius="14" height="400px">
			<view class="padding">
				<view class="margin-top flex justify-between align-center" v-for="(item,index) in list" :key="index">
					<view class=" flex align-center">
						<image :src="item.avatar?item.avatar:'../../static/logo.png'"
							style="width: 70upx;height: 70upx;border-radius: 50%;"></image>
						<view class="margin-left-sm">
							<view class="text-lg text-bold">{{item.userName}}</view>
							<view class="margin-top-xs">{{item.phone}}</view>
						</view>
					</view>
					<view class="buttn" @click="zhipaoOrder(item)">转派单</view>
				</view>
			</view>
		</u-popup>


		<!-- 确认码弹框 -->
		<view class="boxtk" v-if="reverTrue">
			<view class="whitebox padding">
				<view class="flex justify-between align-center">
					<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
					<view @click="bindclose()">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view style="margin-top:59upx;">
					<input placeholder="请输入确认码" name="input" maxlength="10" v-model="codeNum" type="number"
						style="background: #F2F2F2;height:100upx;padding:30upx"></input>
				</view>
				<view class="btn" @click="cancelOrder(order,2)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				page: 1,
				limit: 10,
				list: [],
				customStyle: {
					color: '#fff',
					backgroundColor: '#557EFD',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 15rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '160rpx',
					height: '54rpx',
					margin: "0 0 0 15rpx"
				},
				id: '',
				order: {
					user: {},
					game: {}
				},
				isTrue: 0,
				vipMoney: '',
				data: [],
				price: '',
				startImgs: [],
				startImg: '',
				endImgs: [],
				endImg: '',
				reverTrue: false,
				codeNum: '',
				orderList: []
			}
		},
		onLoad(e) {
			console.log(e)
			var jsObject = JSON.stringify(e);
			console.log(jsObject)
			this.isTrue = e.isTrue
			if (this.isTrue) {

			}
			uni.setNavigationBarTitle({
				title: '订单详情'
			})
			this.id = e.id
			this.getOrder()
			this.getorderlist()
		},
		methods: {
			//获取员工信息
			getStaffUser(StaffUserId) {
				let data = {
					userId: StaffUserId,
				}
				this.$Request.get("/app/user/selectStaffUser", data).then(res => {
					if (res.code == 0) {
						this.orderList = res.data
					}
				});
			},
			zhipai() {
				this.show = true
			},
			zhipaoOrder(e) {
				let data = {
					userId: e.userId,
					ordersId: this.id
				}
				this.$Request.post('/app/orders/assignTask', data).then(res => {
					if (res.code == 0) {
						uni.navigateBack()
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			},
			Ordersure() {
				if (this.endImgs.length == 0) {
					uni.showToast({
						title: '请上传服务后照片',
						icon: 'none'
					})
					return
				}
				if (this.endImgs.length <= 3) {
					uni.showToast({
						title: '图片最少四张',
						icon: 'none'
					})
					return
				}
				this.codeNum = ''
				// this.codeIndex = index;
				this.reverTrue = true
			},
			bindclose() {
				this.reverTrue = false
			},
			//一键复制
			copyOrderuser(order) {
				let that = this;
				let data = '服务类型：' + order.orderTaking.gameId + '\n' + '服务地点：' + order.orderTaking.detailadd + '\n' +
					'服务用户：' + order.name + '\n' + '服务电话：' + order.phone + '\n' + '服务时间：' + order.startTime
				uni.setClipboardData({
					data: data,
					success: function() {
						that.$queue.showToast('复制成功')
					}
				})
			},
			copyOrder(order) {
				let that = this;
				uni.setClipboardData({
					data: order,
					success: function() {
						that.$queue.showToast('复制成功')
					}
				})
			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			binddetail(e) {
				console.log(e)
				uni.navigateTo({

					url: '/pages/index/game/order?id=' + e.orderTakingId
				})
			},
			getOrder() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				let data = {
					id: this.id
				}
				this.$Request.get('/app/orders/queryOrders', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.order = res.data
						if (this.order.orderTaking.gameId) {
							this.order.orderTaking.gameId = this.order.orderTaking.gameId.split(",");
						}
						if (this.order.startServiceImg) {
							this.order.startServiceImg = this.order.startServiceImg.split(',')
						}
						if (this.order.endServiceImg) {
							this.order.endServiceImg = this.order.endServiceImg.split(',')
						}
						if (res.data.staffUserId) {
							this.getStaffUser(res.data.staffUserId)
						}
						this.price = (res.data.orderTaking.oldMoney * res.data.orderNumber)
							.toFixed(2)
						this.vipMoney = (res.data.orderTaking.money * res.data.orderNumber - res.data.payMoney * 1)
							.toFixed(2)
					}
				})
			},
			getorderlist() {
				let data = {
					page: this.page,
					limit: this.limit,
					phone: this.search,
				}
				this.$Request.get("/app/user/selectUserList", data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.orderList, ...res.data.list]
						}
					}
					uni.stopPullDownRefresh();
				});
			},
			// 取消订单
			cancelOrder(e, status) {
				let that = this
				if (status == 2) {
					if (!this.codeNum) {
						uni.showToast({
							title: '请输入确认码',
							icon: 'none'
						})
						return
					}
					that.endImg = that.endImgs
					that.endImg = that.endImg.toString()
					that.reverTrue = false
				}
				if (status == 1) {
					if (that.startImgs.length == 0) {
						uni.showToast({
							title: '请上传服务前照片',
							icon: 'none'
						})
						return
					}
					if (that.startImgs.length <= 3) {
						uni.showToast({
							title: '图片最少四张',
							icon: 'none'
						})
						return
					}
					that.startImg = that.startImgs
					that.startImg = that.startImg.toString()
					that.reverTrue = false
				}


				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
				} else if (status == 1) {
					content = '确定开始服务吗？'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							// let data = {
							// 	id: e.ordersId,
							// 	status
							// }
							let data
							if (status == 3) {
								data = {
									id: e.ordersId,
									status
								}
							} else if (status == 2) {
								data = {
									id: e.ordersId,
									endServiceImg: that.endImg,
									code: that.codeNum,
									status

								}
							} else if (status == 1) {
								data = {
									id: e.ordersId,
									startServiceImg: that.startImg,
									status

								}
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									if (status == 3 || status == 1) {
										that.getOrder()
									} else if (status == 2) {
										that.codeNum = ''

										that.getOrder()
									}
								} else {
									that.$queue.showToast(res.msg)
								}
							})
						}
					},
				})

			},
			// 支付订单
			pay() {
				let that = this
				uni.showModal({
					title: '付款提示',
					content: '确认支付' + that.order.payMoney + '元吗?',
					success: function(re) {
						if (re.confirm) {
							console.log('用户点击确定');
							that.$Request.post("/app/orders/payMoney", {
								ordersId: that.order.ordersId,
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else if (re.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},

			// cancelOrder(e) {
			// 	let data = {
			// 		id: e.ordersId,
			// 		status: '3'
			// 	}
			// 	this.$Request.get('/app/orders/cancelOrder', data).then(res => {
			// 		if (res.code == 0) {
			// 			uni.showToast({
			// 				title: '取消成功',
			// 				icon: 'none'
			// 			})
			// 			setTimeout(function() {
			// 				uni.navigateBack()
			// 			}, 1000)
			// 		}
			// 	})
			// },
			goMsg() {
				let data = {
					userId: uni.getStorageSync('userId'),
					focusedUserId: this.order.user.userId,
					userType: 3
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.order.user.userId == res.data.userId ? res.data.focusedUserId : this.order
							.user.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			},
			// 查看图片
			saveImg(imgs, index) {
				if (this.LBSelect) {
					if (index == this.LBIndex - 1) {
						return;
					}
				}
				// console.log(imgs)
				let that = this;
				let imgArr = imgs
				// imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			removeImg(index, state) {
				if (state == 1) {
					this.startImgs.splice(index, 1)
				} else if (state == 2) {
					this.endImgs.splice(index, 1)
				}
			},
			// 图片上传
			addImage(e) {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: 'https://jiazhengsfv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										console.log(JSON.parse(uploadFileRes.data).data)
										that.startImgs.push(JSON.parse(uploadFileRes.data).data)
									} else if (e == 2) {
										that.endImgs.push(JSON.parse(uploadFileRes.data).data)
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getorderlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderlist()
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}

	.bg {
		background: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		height: 127rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 440upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.btn {
		width: 400upx;
		height: 88upx;
		background: #557EFD;
		/* box-shadow: 0upx 10upx 20upx 0upx #FFD9B3; */
		border-radius: 16upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 43upx;
	}

	.buttn {
		background: #557EFD;
		color: #fff;
		padding: 20upx 38upx;
		border-radius: 24upx;
	}
</style>
